<!--报文管理-->
<template>
    <div class="messageBox">
        <van-nav-bar
                title="报文管理"
                class="header"
                left-text=""
                left-arrow
                @click-left="jumpPage('/')"
        />
        <div class="main">
            <van-tabs
                    v-model="activeSecond"
                    title-active-color="#153744"
                    color="#153744"
                    style="height: 100%"
            >
                <van-tab title="已发送"  style="height: 100%">
                    <van-search 
                    placeholder="搜索报文"
                    input-align="center"/>
                    <van-list
                            v-model="readySendLoading"
                            :finished="readySendFinished"
                            finished-text="没有更多啦"
                            @load="readySendOnLoad"
                            class="publist"
                    >
                        <div v-for="(item,index) in readySendList" :key="index" class="publistDiv">
                            <van-checkbox v-model="item.checked" checked-color="#153744">
                                已发送短报文：
                                <span class="listTimeContent">{{item.time}}</span>
                            </van-checkbox>
                            <p class="publistContent">
                                {{ item.content.length>40? item.content.substr(0,40)+'...':item.content}}
                            </p>
                        </div>
                    </van-list>

                    <div class="underList">
                        <van-cell @click="checkAllReady" class="btn_left">
                            <van-checkbox v-model="readyCheckedAll" shape="square" checked-color="#153744">全选</van-checkbox>
                        </van-cell>
                        <van-button class="btn_right_2 btn_grey" size="small" round>一键导出</van-button>
                        <van-button class="btn_right" type="danger" size="small" round @click="deleteReadySend">一键删除</van-button>
                    </div>
                </van-tab>
                <van-tab title="接收"  style="height: 100%">
                    <van-search 
                    placeholder="搜索报文"
                    input-align="center"/>
                    <van-list
                            v-model="receiveSendLoading"
                            :finished="receiveSendFinished"
                            finished-text="没有更多啦"
                            @load="receiveSendOnLoad"
                            class="publist"
                    >
                        <div v-for="(item,index) in receiveSendList" :key="index" class="publistDiv">
                            <van-checkbox v-model="item.checked" checked-color="#153744">接收成功短报文：
                                <span class="listTimeContent">{{item.time}}</span>
                            </van-checkbox>
                            <p class="publistContent">
                                {{ item.content.length>40? item.content.substr(0,40)+'...':item.content}}
                            </p>
                        </div>
                    </van-list>
                    <div class="underList">
                        <van-cell @click="checkAllReceive" class="btn_left">
                            <van-checkbox v-model="receiveCheckedAll" shape="square" checked-color="#153744">全选</van-checkbox>
                        </van-cell>
                        <van-button class="btn_right_2 btn_grey" size="small" round>一键导出</van-button>
                        <van-button class="btn_right" type="danger" size="small" round @click="deleteReceiveSend">一键删除</van-button>
                    </div>
                </van-tab>
                <van-tab title="未发送" style="height: 100%">
                    <van-search 
                    placeholder="搜索报文"
                    input-align="center"/>
                    <van-list
                            v-model="unSendLoading"
                            :finished="unSendFinished"
                            finished-text="没有更多啦"
                            @load="getSendOnLoad"
                            class="publist">
                        <div v-for="(item,index) in unSendList" :key="index" class="publistDiv">
                            <p class="publistContent">未发送短报文：<span class="listTimeContent">{{item.time}}</span></p>
                            <p class="publistContent">
                                {{ item.content.length>40? item.content.substr(0,40)+'...':item.content}}
                            </p>
                        </div>
                    </van-list>
                </van-tab>
                <van-tab title="发送失败" style="height: 100%">
                    <van-search 
                    placeholder="搜索报文"
                    input-align="center"/>
                    <van-list
                            v-model="failSendLoading"
                            :finished="failSendFinished"
                            finished-text="没有更多啦"
                            @load="getFailSendOnLoad"
                            class="publist">
                        <div v-for="(item,index) in failSendList" :key="index" class="publistDiv">
                            <van-checkbox v-model="item.checked" checked-color="#153744">
                                发送失败短报文：
                                <span class="listTimeContent">{{item.time}}</span>
                            </van-checkbox>
                            <p class="publistContent">
                                {{ item.content.length>40? item.content.substr(0,40)+'...':item.content}}
                            </p>
                        </div>
                    </van-list>
                    <div class="underList">
                        <van-cell @click="checkAllFail" class="btn_left">
                            <van-checkbox v-model="failCheckedAll" shape="square" checked-color="#153744">全选</van-checkbox>
                        </van-cell>
                        <van-button class="btn_right_2 btn_grey" size="small" round>一键导出</van-button>
                        <van-button class="btn_right" type="danger" size="small" round @click="deleteFailSend">一键删除</van-button>
                    </div>
                </van-tab>

            </van-tabs>
        </div>
        <!-- 下部选项条 -->
        <div class="underbox">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="chat-o"  @click="jumpPage('/chatlist')">聊天</van-tabbar-item>
                <van-tabbar-item icon="friends-o" @click="jumpPage('/address')">通讯录</van-tabbar-item>
                <van-tabbar-item icon="notes-o" >报文管理</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant'
    export default {
        data() {
            return {
                active:2,
                activeSecond:0,
                // 未发送
                unSendList: [],
                unSendLoading: false,//加载状态
                unSendFinished: false,//是否加载
                // 发送失败
                failSendList: [],
                failSendLoading: false,//加载状态
                failSendFinished: false,//是否加载
                failCheckedAll:false,//是否全选
                deleteFailArray:'',//删除字符串
                //已发送
                readySendList: [],
                readySendLoading: false,//加载状态
                readySendFinished: false,//是否加载
                readyCheckedAll:false,//是否全选
                deleteReadyArray:'',//删除字符串
                //接收短报文
                receiveSendList: [],
                receiveSendLoading: false,//加载状态
                receiveSendFinished: false,//是否加载
                receiveCheckedAll:false,//是否全选
                deleteReceiveArray:'',//删除字符串
            }
        },
        methods: {
            jumpPage(url){
                this.$router.push(
                    {
                        path:url
                    }
                )
            },
            getSendOnLoad() {
                let res = $App.getSendQueue();
                this.unSendLoading = false;
                this.unSendFinished= true;
                this.unSendList =JSON.parse(res);

            },
            //发送失败
            getFailSendOnLoad() {
                let res = $App.getCommand('1');   //发送失败1，成功0，接收2
                this.failSendLoading = false;
                this.failSendFinished= true;
                this.failSendList =[];
                JSON.parse(res).forEach(v=>{
                    var obja={};
                    obja.content=v.content;
                    obja.time=v.time;
                    obja.id=v.id;
                    obja.checked=false;
                    this.failSendList.push(obja);
                })
            },
            // 发送失败信息全选
            checkAllFail(){
                this.failCheckedAll = !this.failCheckedAll;
                if(this.failCheckedAll == true){
                    this.failSendList.forEach(v=>{
                        v.checked=true;
                    })
                }else if(this.failCheckedAll == false){
                    this.failSendList.forEach(v=>{
                        v.checked=false;
                    })
                }
            },
            deleteFailSend(){
                this.deleteFailArray='';
                this.failSendList.forEach(v=>{
                    if(v.checked==true){
                        this.deleteFailArray=this.deleteFailArray+v.id+';'
                    }
                });
                if(this.deleteFailArray==''){
                    Toast.success('暂时没有选择')
                }else{
                    this.deleteFailArray=this.deleteFailArray.substring(0,this.deleteFailArray.length-1);
                    let res = $App.delCommand(this.deleteFailArray);
                    this.deleteFailArray='';
                    this.getFailSendOnLoad();
                }

            },
            //已发送
            readySendOnLoad(){
                let res = $App.getCommand('0');   //发送失败1，成功0，接收2
                this.readySendLoading = false;
                this.readySendFinished= true;
                this.readySendList =[];
                JSON.parse(res).forEach(v=>{
                    var objb={};
                    objb.content=v.content;
                    objb.time=v.time;
                    objb.id=v.id;
                    objb.checked=false;
                    this.readySendList.push(objb);
                });
                this.readySendList=[{
                    content:'$CCTCQ,0975490,1_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:55:12',
                    id:11,
                    chencked:false
                },{
                    content:'$CCTCQ,0975490,23_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:54:12',
                    id:12,
                    chencked:false
                },{
                    content:'$CCTCQ,2975490,13_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:53:12',
                    id:13,
                    chencked:false
                },{
                    content:'$CCTCQ,2976490,33_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:52:12',
                    id:14,
                    chencked:false
                },{
                    content:'$CCTCQ,3975490,43_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:51:12',
                    id:15,
                    chencked:false
                },{
                    content:'$CCTCQ,4975490,49_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:50:12',
                    id:16,
                    chencked:false
                },{
                    content:'$CCTCQ,5975490,59_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:49:12',
                    id:17,
                    chencked:false
                },{
                    content:'$CCTCQ,6975490,69_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:48:12',
                    id:18,
                    chencked:false
                },{
                    content:'$CCTCQ,7975490,79_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:47:12',
                    id:19,
                    chencked:false
                }];
            },
            // 发送成功信息全选
            checkAllReady(){
                this.readyCheckedAll = !this.readyCheckedAll;
                if(this.readyCheckedAll == true){
                    this.readySendList.forEach(v=>{
                        v.checked=true;
                    })
                }else if(this.readyCheckedAll == false){
                    this.readySendList.forEach(v=>{
                        v.checked=false;
                    })
                }
            },
            deleteReadySend(){
                this.deleteReadyArray='';
                this.readySendList.forEach(v=>{
                    if(v.checked==true){
                        this.deleteReadyArray=this.deleteReadyArray+v.id+';'
                    }
                });
                if(this.deleteReadyArray==''){
                    Toast.success('暂时没有选择')
                }else{
                    this.deleteReadyArray=this.deleteReadyArray.substring(0,this.deleteReadyArray.length-1);
                    let res = $App.delCommand(this.deleteReadyArray);
                    this.deleteReadyArray='';
                    this.readySendOnLoad();
                }

            },
            //已接收
            receiveSendOnLoad(){
                let res = $App.getCommand('2');   //发送失败1，成功0，接收2
                this.receiveSendLoading = false;
                this.receiveSendFinished= true;
                this.receiveSendList =JSON.parse(res);
                this.receiveSendList =res;
                this.receiveSendList=[{
                    content:'$CCTCQ,0975490,1_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:55:12',
                    id:11,
                    chencked:false
                },{
                    content:'$CCTCQ,0975490,23_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:54:12',
                    id:12,
                    chencked:false
                },{
                    content:'$CCTCQ,2975490,13_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:53:12',
                    id:13,
                    chencked:false
                },{
                    content:'$CCTCQ,2976490,33_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:52:12',
                    id:14,
                    chencked:false
                },{
                    content:'$CCTCQ,3975490,43_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:51:12',
                    id:15,
                    chencked:false
                },{
                    content:'$CCTCQ,4975490,49_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:50:12',
                    id:16,
                    chencked:false
                },{
                    content:'$CCTCQ,5975490,59_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:49:12',
                    id:17,
                    chencked:false
                },{
                    content:'$CCTCQ,6975490,69_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:48:12',
                    id:18,
                    chencked:false
                },{
                    content:'$CCTCQ,7975490,79_Lf1,1,A4CED2C3C7D5E2B1DF,0*5E\r\n',
                    time:'2021-12-24 16:47:12',
                    id:19,
                    chencked:false
                }];
            },
            // 接受成功信息全选
            checkAllReceive(){
                this.receiveCheckedAll = !this.receiveCheckedAll;
                if(this.receiveCheckedAll == true){
                    this.receiveSendList.forEach(v=>{
                        v.checked=true;
                    })
                }else if(this.receiveCheckedAll == false){
                    this.receiveSendList.forEach(v=>{
                        v.checked=false;
                    })
                }
            },
            deleteReceiveSend(){
                this.deleteReceiveArray='';
                this.receiveSendList.forEach(v=>{
                    if(v.checked==true){
                        this.deleteReceiveArray=this.deleteReceiveArray+v.id+';'
                    }
                });
                if(this.deleteReceiveArray==''){
                    Toast.success('暂时没有选择')
                }else{
                    this.deleteReceiveArray=this.deleteReceiveArray.substring(0,this.deleteReceiveArray.length-1);
                    let res = $App.delCommand(this.deleteReceiveArray);
                    this.deleteReceiveArray='';
                    this.receiveSendOnLoad();
                }
            }
        },
    };
</script>

<style scoped>
    .messageBox {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .messageBox .header{
        color: #ffffff;
        background-color: #153744;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }
    /deep/ .van-checkbox__label{
        font-size: 15px;
        width: 100%;
    }

    /deep/ .van-tabs {
        position: relative;
        width: 100%;
    }
    /deep/ .van-tabs__content{
        position: relative;
        width: 100%;
        height: calc(100% - 100px);
    }
    .publist{
        padding: 5px 10px;
        width: 100%;
    }
    .publistDiv{
        margin: 20px 0;
    }
    .publist .publistContent{
        margin: 5px 5px 5px 30px;
        color: #666666;
        font-size: 14px;
    }
    .listTimeContent{
        display: inline-block;
        position: fixed;
        right: 10px;
    }
    .underList{
        bottom: 55px;
        position: absolute;
    }
    .underbox{
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }
    .main {
        flex: 1;
        width: 100%;
        overflow-y: auto;
        position: relative;
    }
    .btn_left{
        display: inline-block;
        position: fixed;
        left: 10px;
    }
    .btn_right{
        display: inline-block;
        position: fixed;
        right: 10px;
    }
    .btn_right_2{
        display: inline-block;
        position: fixed;
        right: 80px;
    }
    .btn_grey{
        background-color: #153744;
        color: #ffffff;
        border: #153744 1px solid;
    }
</style>
